import React from "react";
import { Chart, Line, Point, Tooltip, Axis } from "bizcharts";

// 数据源
const data = [
	{
		year: "1991",
		value: 3,
	},
	{
		year: "1992",
		value: 4,
	},
	{
		year: "1993",
		value: 3.5,
	},
	{
		year: "1994",
		value: 5,
	},
	{
		year: "1995",
		value: 4.9,
	},
	{
		year: "1996",
		value: 6,
	},
	{
		year: "1997",
		value: 7,
	},
	{
		year: "1998",
		value: 9,
	},
	{
		year: "1999",
		value: 11,
	},
];

export default  function Demo() {
	return (
    <Chart
			padding={[10, 20, 50, 50]}
			autoFit
			data={data}
			scale={{ value: { min: 0, max: 11 } }}
			onAxisLabelClick={(e => {
				const { axis } = e.gEvent.delegateObject;
				debugger
				alert(`you clicked axis: ${axis.get('field')}`)
			})}
		>
			<Line position="year*value" tooltip={['year*value', (y, v) => {
				return {
					title: `${y}年`,
					name: 'value',
					value: v
				}
			}]} />
			<Point position="year*value" />
			<Tooltip showCrosshairs lock triggerOn='click' />
			<Axis name='value' title={{
				position: 'center',
				style: {
					fontSize: '12'
				}
			}} />
		</Chart>
	);
}